<template>
	<view style="background-color: #fff;">
		<view style="height:20rpx;width:750rpx;background-color: #f6f6f6;"></view>
		<view style="padding:0 30rpx;width:690rpx;font-size: 28rpx;">
			<view
				style="width:100%;border-bottom: 1px solid #eee;height:120rpx;display: flex;justify-content: space-between;align-items: center;">
				<text>头像</text>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatarUrl"></image>
				</button>
			</view>
			<view
				style="width:100%;border-bottom: 1px solid #eee;height:120rpx;display: flex;justify-content: space-between;align-items: center;">
				<text>昵称</text>
				<input maxlength="16" v-model="nickname" type="nickname" class="nick-input" placeholder="请输入昵称" />
			</view>
			<view style="margin-top:20rpx;margin-bottom: 50rpx;">
				<text style="font-size:23rpx;color:#bbb;">昵称限2-16个字符</text>
			</view>

			<view @tap="submit" class="txtwrapper" style="display:flex;justify-content: center;align-items: center;">
				<text class="txt" style="color:#fff;">确认</text>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: '',
				newavatarUrl: '',
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
			}
		},
		onLoad(option) {
			console.log(option)
			if (option.type == 1) {
				this.nickname = uni.getStorageSync('userInfo').nickname
				this.avatarUrl = uni.getStorageSync('userInfo').avatar
				uni.setNavigationBarTitle({
					title: '个人信息'
				})
			}
		},
		methods: {
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
				this.newavatarUrl = e.detail.avatarUrl
			},
			submit() {
				let that = this
				if (!that.nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
					return
				}
				if (!that.newavatarUrl && that.avatarUrl.indexOf('mmbiz') >= 0) {
					uni.showToast({
						title: '请选择头像',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				if (that.newavatarUrl) {
					const uploadTask = uni.uploadFile({
						url: 'https://app.ukmioliving.com/api/common/qupload',
						filePath: that.avatarUrl,
						header: {
							token: uni.getStorageSync('userInfo').token,
						},
						name: "file",
						success: (res) => {
							console.log(res, '上传成功返回的数据')
							uni.hideLoading()
							let fullurl = JSON.parse(res.data).data.fullurl
							console.log(fullurl, "返回全地址")
							that.$H.post(this.$api.user_update_info, {
								nickname: that.nickname,
								avatar: fullurl
							}, {
								token: true
							}).then(resp => {
								console.log(resp)
								if (resp.code == 1) {
									let u = uni.getStorageSync('userInfo')
									u = Object.assign(u, {
										nickname: that.nickname,
										username: that.nickname,
										avatar: fullurl
									})
									uni.setStorageSync('userInfo', u)

									uni.showToast({
										title: '保存成功',
										icon: 'none',
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								}else{
									console.log(resp)
								}
							})

						}
					})
					uploadTask.onProgressUpdate((res) => {
						console.log('上传进度' + res.progress);
						console.log('已经上传的数据长度' + res.totalBytesSent);
						console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						// 测试条件，取消上传任务。
						// if (res.progress > 50) {
						// 	uploadTask.abort();
						// }
					});
				} else {
					that.$H.post(this.$api.user_update_info, {
						nickname: that.nickname,
						avatar: that.avatarUrl
					}, {
						token: true
					}).then(resp => {
						uni.hideLoading()
						console.log(resp)
						if (resp.code == 1) {
							let u = uni.getStorageSync('userInfo')
							u = Object.assign(u, {
								nickname: that.nickname,
								username: that.nickname,
								avatar: that.avatarUrl
							})
							uni.setStorageSync('userInfo', u)

							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						} else {
							uni.showToast({
								title: '您没有做任何更改，无需保存',
								icon: 'none'
							})
						}
					})

				}

			},
		}
	}
</script>

<style>
	button::after {
		border: none;
	}

	.avatar-wrapper {
		width: 90rpx;
		height: 90rpx;
		background: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;

	}

	.nick-input {
		text-align: right;
	}

	.txtwrapper {
		width: 690rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: orange;
	}

	.txt {
		font-size: 30rpx;
		line-height: 30rpx;
	}
</style>
